<template>
  <div class="contain">
    <div class="Title">工厂能耗平台</div>

    <div
      class="tips"
      style="
        margin-top: 100px;
        text-align: center;

        font-size: 20px;
      "
    >
      请填写用户名及密码进行登录
    </div>
    <div class="containInner" style="margin-top: 60px">
      <div class="userName"></div>
      <div class="input">
        <input
          ref="name"
          style="height: 100%; font-size: 1.4vw"
          type="text"
          class="inputName"
          placeholder="用户名"
          v-model="name"
        />
      </div>
    </div>
    <div class="containInner" style="margin-top: 20px">
      <div class="userName1"></div>
      <div class="input">
        <input
          ref="password"
          type="password"
          style="height: 100%; font-size: 1.4vw"
          class="inputPassWord"
          placeholder="密码"
          v-model="password"
        />
      </div>
    </div>
    <div class="login" @click="login()">登录</div>
  </div>
</template>


<script>
import service from "@/api/api.js";
import jsencrypt from "jsencrypt";
export default {
  name: "",
  data() {
    return {
      key: null,
      jsencrypt: null,
      name: null,
      password: null,
    };
  },

  methods: {
    async login() {
      if (!this.name || !this.password) {
        return this.$message({
          message: "账户或密码不可缺少",
          type: "warning",
        });
      }

      let re;
      try {
        re = await service.get("/system/get-public-key");

        sessionStorage.setItem("PublicKey", re.data.publicKey);
      } catch (error) {
        return this.$message({
          message: "网络错误,请刷新重试",
          type: "warning",
        });
      }
      this.key = re.data;
      this.jsencrypt = new jsencrypt();
      this.jsencrypt.setPublicKey(re.data);

      let data = {
        name: this.name,
        password: this.jsencrypt.encrypt(this.password),
      };
      // console.log(this.jsencrypt);

      sessionStorage.setItem("userName", this.name);
      let res = await service({
        method: "post",
        url: "/system/login",
        data: data,
      });
      let url = [];

      if (res.data) {
        sessionStorage.setItem("token", JSON.stringify(res.data.token));
        this.$router.push("/index");
      } else {
        this.$message({
          message: "账号或密码不正确",
          type: "warning",
        });
      }
    },
    async beforelogin() {},
  },
  created() {
    this.beforelogin();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
/* 覆盖浏览器自动填充的背景色和文字颜色 */
input:-internal-autofill-selected {
  background-color: white !important; /* 自定义背景色 */
  color: #333 !important; /* 自定义文字颜色 */
}

/* 兼容其他浏览器的私有前缀 */
input:-webkit-autofill {
  background-color: #f0f8ff !important;
  color: #333 !important;
}
@media (min-width: 600px) and(max-width: 3840px) {
  .contain {
    width: 100vw;
    height: 100vh;
    display: block;
    background: url(@/assets/img/rb/bigBack.png);
    background-size: 100% 100%;
    overflow: hidden;
  }
  .Title {
    margin: auto;
    font-size: 50px;
    color: black;
    font-weight: 800;
    width: 600px;
    text-align: center;
    margin-top: 10vh;
  }
  .login {
    margin: auto;
    width: 300px;
    margin-top: 5vh;
    line-height: 50px;
    background-color: #7266bb;
    color: white;
    font-size: 25px;
    text-align: center;
    border-radius: 5px;
    user-select: none;
    cursor: pointer;
  }
  .tips {
    color: #323131;
  }
  .containInner {
    width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color: white;
  }

  .userName {
    width: 45px;
    height: 40px;
    background: url(@/assets/img/passWord.png);
    background-size: 100% 100%;
    border: 1px solid #dfe7e9;
  }

  .input {
    width: 240px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe7e9;
    border-left: none;
  }

  .userName1 {
    border: 1px solid #dfe7e9;
    width: 45px;
    height: 40px;
    line-height: 40px;
    background: url(@/assets/img/userName.png);
    background-size: 100% 100%;
  }

  input {
    width: 100%;
    height: 4vh;
    text-align: left;
    text-indent: 1em;
    outline: none;
    border: none;
    background: rgba(0, 0, 0, 0);
  }
}
@media (max-width: 600px) {
  .contain {
    width: 100vw;
    height: 100vh;
    background: url(@/assets/img/rb/bigBack.png);
    background-size: 100% 100%;
    overflow: hidden;
  }
  .Title {
    margin: auto;
    font-size: 40px;
    color: black;
    width: 300px;
    text-align: center;
    margin-top: 10vh;
  }
  .login {
    margin: auto;
    margin-top: 5vh;
    cursor: pointer;
    width: 60%;
    line-height: 50px;
    background-color: #7266bb;
    color: white;
    font-size: 25px;
    text-align: center;
    border-radius: 5px;
    user-select: none;
  }

  .containInner {
    width: 60%;
    height: 4.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color: white;
  }

  .userName {
    width: 17%;
    height: 4vh;
    background: url(@/assets/img/passWord.png);
    background-size: 100% 100%;
    border: 1px solid #dfe7e9;
  }

  .input {
    width: 80%;
    height: 4vh;
    border: 1px solid #dfe7e9;
    border-left: none;
  }

  .userName1 {
    border: 1px solid #dfe7e9;
    width: 17%;
    height: 4vh;
    background: url(@/assets/img/userName.png);
    background-size: 100% 100%;
  }

  input {
    width: 100%;
    height: 4vh;
    text-align: left;
    text-indent: 1em;
    outline: none;
    border: none;
    background: rgba(0, 0, 0, 0);
    /* border: 1px solid grey */
  }
}
</style>
